<template>
  <div class="questionnaireFieldConfig">
    <configCompositionTwoWindowStyle>
      <template slot="card">
        <search
          ref="search1"
          :inputTitle="$t('configLazyLoad.questionnaireConfig.inputFieldToQuery')"
          :loading="tableLoading"
          @add="addField"
          @refresh="refresh"
          @search="searchByName"
          @inputChange="inputChange"
          @turnPage="turnPage"
          :showAdvSearch="false"
          :isReloadIvr="false"
          :currentPage="currentPage"
          :count="count"
          :pageSize="10">
        </search>
        <div class="diy-table">
          <el-table :data="tableData" :highlight-current-row="true" style="width: 100%" v-loading="tableLoading" size="mini">
            <template v-for="item in tableHeader">
              <el-table-column
                v-if="item.prop !== 'handel'"
                :prop="item.prop"
                :label="item.label">
                <template scope="props">
                  <span class="cell-ellipsis" v-text="item.prop === 'name' ? props.row.name : props.row.desc"></span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="item.prop === 'handel'"
                :label="item.label">
                <template scope="scope">
                  <el-button @click="updata(scope.row)" :disabled="scope.row.hideUpdateBtn" type="text" size="small" class="updata">{{$t('public.edit')}}</el-button>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
      </template>
      <template slot="detail">
        <!--<breadCrumb  v-if="showRight || isShowAddOrEdit" :first="firstTitle" :second="''"></breadCrumb>-->
        <div class="showDetial" v-show="showRight">
          <div class="showDetialTitle" v-text="isAdd ? $t('configLazyLoad.questionnaireConfig.addField') : $t('configLazyLoad.questionnaireConfig.updateField')"></div>
          <el-form ref="form" :model="fieldForm" :rules="rules" label-position="left" label-width="120px">
            <el-form-item :label="$t('configLazyLoad.questionnaireConfig.fieldName')" prop="name">
              <el-input v-model.trim="fieldForm.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('agentSetting.agentSetting43')">
              <el-input type="textarea" v-model="fieldForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="saveField" type="primary" class="primary_btn fr">{{$t('public.save')}}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </configCompositionTwoWindowStyle>
  </div>
</template>

<script>
  import configCompositionTwoWindowStyle from '../../../../ui-modules/config/configCompositionTwoWindowStyle'
  import search from '../../channelConfig/base/search'
  import breadCrumb from '../../channelConfig/base/breadCrumb'
  export default {
    name: 'questionnaireFieldConfig',
    data () {
      return {
        agents: [],
        currentPage: 1,    //   当前页
        tableHeader: [
          {prop: 'name', label: this.$t('configLazyLoad.questionnaireConfig.fieldName')},
          {prop: 'desc', label: this.$t('configLazyLoad.questionnaireConfig.fieldDesc')},
          {prop: 'handel', label: this.$t('public.operate')}
        ],                        //   自定义 表头
        tableData: [],           //  表格数据
        tableLoading: false,      //   表格  loading
        showRight: false,           //   右侧显示隐藏
        isLoadingAddOrEdit: false,
        serachName: '',
        count: 0,
        fieldForm: {
          name: '',
          desc: ''
        },
        isAdd: false,
        rules: {
          name: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ]
        }
      }
    },
    props: {
      tempId: {
        type: String,
        default: ''
      }
    },
    watch: {
      tempId () {
        this.showRight = false
        this.search()
      },
      fieldForm () {
        this.$refs.form.resetFields() // 表单重置
      }
    },
    components: {
      configCompositionTwoWindowStyle,
      search,
      breadCrumb
    },
    computed: {},
    methods: {
      addField () {
        this.isAdd = true
        this.fieldForm._id = ''
        this.fieldForm.name = ''
        this.fieldForm.desc = ''
        this.fieldForm.temp_id = this.tempId
        this.showRight = true
      },
      refresh () {
        this.$refs.search1.resetForm()
        this.showRight = false
        this.currentPage = 1
        this.serachName = ''
        this.search()
      },
      searchByName (val) {
        this.serachName = val
        this.currentPage = 1
        this.search(val)
      },
      inputChange (val) {
        this.serachName = val
      },
      search (val) {
        this.tableLoading = true
        this.$store.dispatch('queryQuestionnaireFields', {page: this.currentPage, limit: 10, temp_id: this.tempId, query: this.serachName}).then((res) => {
          if (res.success) {
            let tableData = res.list
            // 如果没有最后更新时间的处理
            tableData.forEach((item, index) => {
              if (item._id.indexOf('name') !== -1 || item._id.indexOf('phone') !== -1) {
                item.hideUpdateBtn = true
              }
              if (!item.desc) {
                item.desc = '--------'
              } else {
                item.desc = item.desc
              }
            })
            this.tableData = tableData
            this.count = res.count
            this.tableLoading = false
          }
        })
      },
      turnPage (val, searchContent) {
        this.currentPage = val
        this.search(searchContent)
      },
      updata (val) {
        this.isAdd = false
        let id = val._id
        this.fieldForm = {}
        this.showRight = true
        this.isLoadingAddOrEdit = true
        this.$store.dispatch('getQuestionnaireFieldById', {_id: id}).then(res => {
          if (res.success) {
            this.fieldForm = res.data
            this.isLoadingAddOrEdit = false
          }
        })
      },
      saveField () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (!this.isAdd) { // 编辑
              this.$store.dispatch('updateQuestionnaireFields', this.fieldForm).then(res => {
                if (res.success) {
                  this.showRight = false
                  this.isLoadingAddOrEdit = false
                  this.refresh()
                  this.$message.success(this.$t('configLazyLoad.qualityCheck.saveSuccess'))
                }
              })
            } else { // 添加
              this.$store.dispatch('addQuestionnaireFields', this.fieldForm).then(res => {
                if (res.success) {
                  this.showRight = false
                  this.isLoadingAddOrEdit = false
                  this.refresh()
                  this.$message.success(this.$t('configLazyLoad.qualityCheck.addSuccess'))
                }
              })
            }
            this.$store.dispatch('refreshCacheFromDb', {type: 'questionnaireField'})
          }
        })
      }
    },
    mounted () {
      this.search()
    },
    beforeMount () {
    }
  }
</script>

<style lang="stylus" scoped>
  .questionnaireFieldConfig
    border-bottom: 1px solid #d9d9d9
    border-left: 1px solid #d9d9d9
    border-right: 1px solid #d9d9d9
  .showDetialTitle
    padding: 8px 20px
    font-weight: 600
    font-size: 14px
    border-bottom: 1px solid #ccc
  .el-form
    padding 20px
    .el-input
      font-size 12px
  .el-table
    .cell-ellipsis
      text-overflow ellipsis
      overflow hidden
      white-space nowrap
</style>
